<template>
  <div @click.stop>
    <div class="container mb-10">
      <!-- 图片 -->
      <div class="top flex justify-content-center align-items-center">
        <el-upload
          class="avatar-uploader"
          action="/api/upload"
          name="image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :disabled="!(route.fullPath.includes('/editor') || route.fullPath.includes('/materials'))"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="cursor: pointer" />
          <div v-else style="color: #606266; cursor: pointer">
            <el-icon><Upload /></el-icon>
            添加图片
          </div>
        </el-upload>
      </div>
      <!-- 标题和描述 -->
      <div
        class="bottom flex justify-content-center align-items-center flex-direction-column font-weight-500"
      >
        <div class="item">{{ picTitle }}</div>
        <div class="desc mt-5 mb-5">{{ picDesc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { Upload } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import type { UploadProps } from 'element-plus';
import type { GetPicLink } from '@/types';

const props = defineProps({
  picTitle: {
    type: String,
    default: '',
  },
  picDesc: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
});

const getPicLink = inject<GetPicLink>('getPicLink', () => {});
const route = useRoute();
const imageUrl = ref('');

watch(
  () => props.value,
  async (newVal) => {
    if (newVal) {
      const response = await fetch(newVal);
      const blob = await response.blob();
      // 使用 blob 创建 File 对象
      const file = new File([blob], 'image.jpg', { type: blob.type });
      imageUrl.value = URL.createObjectURL(file);
    } else {
      imageUrl.value = '';
    }
  },
  { immediate: true },
);

const handleAvatarSuccess: UploadProps['onSuccess'] = async (response) => {
  if (getPicLink) {
    getPicLink({
      index: props.index,
      link: response.imageUrl,
    });
  }
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 6) {
    ElMessage.error('图片大小不要超过6MB!');
    return false;
  }
  return true;
};
</script>

<style scoped lang="scss">
.container {
  width: 200px;
  height: 300px;
  border: 1px solid var(--el-menu-border-color);
  border-radius: var(--border-radius-md);
  // color: var(--font-color-light);
  > .top {
    width: 100%;
    height: 200px;
    background-color: var(--font-color-lightest);
  }
  > .bottom {
    height: 100px;
    font-size: var(--font-size-lg);
    > .desc {
      font-size: var(--font-size-base);
      // color: var(--font-color-light);
    }
  }
}
.avatar {
  width: 200px;
  height: 200px;
  object-fit: contain;
}
</style>
